@if (isset($category))
@section('title', $category->description . ' - ' . Option::get('web_name'))
@endif
<x-app-layout>
    <x-slot name="header">
        <div class="flex items-center">
        @if (isset($category))
            @if(count($category->hot_tags) <= 0)
            <h2 class="font-semibold text-xl text-gray-800 leading-tight">
                {{ $category->description }}
            </h2>
                @else
                    <div class="self-center -mt-1 max-w-5xl">
                        @foreach($category->hot_tags as $tag)
                            @if($tag['count'] > 1)
                            <a href="{{route('tags.index', ['category' => $category->slug, 'tag' => $tag['tag']])}}" class="inline-block bg-gray-200 rounded-full px-3 py-1 mb-1 text-sm font-semibold text-gray-700 mr-2">
                                #{{$tag['tag']}}({{$tag['count']}})
                            </a>
                            @endif
                        @endforeach
                    </div>
                @endif
            @auth
                <div class="ml-auto">
                    <x-button-link href="{{route('archives.create')}}">{{__('Create')}}</x-button-link>
                </div>
            @endauth
        @else
           <div class="self-center">
               {{Option::get('description')}}
           </div>
            @auth
                <div class="ml-auto">
                    <x-button-link href="{{route('archives.create')}}">{{__('Create')}}</x-button-link>
                </div>
            @endauth
        @endif
        </div>
    </x-slot>

    <div class="py-12">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
            <div class="overflow-hidden -mx-4">
                @foreach($archives as $archive)
                    <div class="bg-white mx-4 mb-4 shadow sm:rounded-lg @if($loop->index > 0) mt-4 @endif" >
                        <div class="flex p-4 border-b">
                            <div class="flex items-center">
                                <img class="w-12 h-12 rounded-full mr-2" src="{{$archive->user->profile_photo_url}}" alt="Avatar of Jonathan Reinink">
                                <div class="flex flex-col">
                                    <h3 class="text-lg">
                                        <a href="{{route($archive->category->slug . '.show', $archive)}}">{{$archive->title}}</a>
                                    </h3>
                                    <span class="text-xs text-gray-400">{{ $archive->updated_at->diffForHumans() }}</span>
                                </div>
                            </div>


                            <div class="ml-auto flex items-center">
                                <div class="flex items-center justify-center">
                                    <div class="mr-1">
                                        <i class="fa fa-eye text-gray-400"></i>
                                    </div>
                                    <span class="text-xs text-gray-400 font-semibold text-left leading-none">25</span>
                                </div>
                                @livewire('actions.thumb', ['count' => $archive->likes_count, 'archive_id' => $archive->id, 'is_liked' => Auth::check() && $archive->isLikedBy(Auth::user())])
                            </div>
                        </div>

                        <div class="relative my-2 p-2" id="archive-{{$archive->id}}">
                            @foreach($archive->files as $file)
                                <div x-data="{currentX:0, currentY: 0}" class="absolute cursor-pointer"
                                     id="archive-{{$archive->id}}-file-{{$loop->index}}"
                                     @mouseover="
                                     // console.log($event.target.parentElement.style)
                                     // console.log('top', $event.target.parentElement.style.top, 'left', $event.target.parentElement.style.left)
                                     const scrollTop = document.documentElement.scrollTop
                                        const {top, left, width, height} = $event.target.getBoundingClientRect()
                                        window.currentElementTop = top
                                        window.currentElementLeft = left
                                        window.originWidth = width
                                        window.originHeight = height
                                        window.currentScrollTop = scrollTop
                                     "
                                     @click="window.livewire.emit('showPreview', {{$archive->id}}, {{$loop->index}}, '{{$file->file_url}}', {{$file->width}}, {{$file->height}})"
                                >@if($loop->parent->index <= 0)
                                        <img class="lazy" alt="{{$archive->title}}" src="{{ $file->file_url }}?x-bce-process=style/list" data-src="{{$file->file_url}}?x-bce-process=style/list"/>
                                @else
                                        <img class="lazy" alt="{{$archive->title}}" style="background-color: {{$file->color ? '#' . $file->color: 'transparent'}};" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{{$file->color}}' viewBox='0 0 3 2'%3E%3C/svg%3E" data-lazy-src="{{ $file->file_url }}?x-bce-process=style/mini" data-src="{{$file->file_url}}?x-bce-process=style/list"/>
                                @endif

                                </div>
                            @endforeach
                        </div>
                        <div class="flex items-center justify-between">
                            @if(count($archive->tags) > 0)
                                <div class="p-4 pt-0">
                                    @foreach($archive->tags as $tag)
                                        <a href="{{route('tags.index', ['category' => $archive->category->slug, 'tag' => $tag->slug])}}" class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2">
                                            #{{$tag->name}}
                                        </a>
                                    @endforeach
                                </div>
                            @endif
                            @can('update', $archive)
                                <div class="p-4 flex pt-0">
                                    <a href="{{route('archives.edit', $archive)}}" class="btn-link mr-2">
                                        <i class="fa fa-pencil mr-1"></i>
                                        {{ __('Edit') }}
                                    </a>
                                    <livewire:archives.delete :archive="$archive">
                                </div>

                            @endcan
                        </div>


                    </div>
                @endforeach
            </div>
            {{$archives->links()}}
        </div>
    </div>
    @push('scripts')
        <script>
            var archives = @json($archives);
        </script>
    @endpush
    @push('preview')
        @livewire('common.preview')
    @endpush
</x-app-layout>



